<template>
  <div>
    <Row :gutter="20">
      <i-col
        :xs="24"
        :md="12"
        :lg="6"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 120px; padding-bottom: 10px"
      >
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row>
      <i-col :xs="24" :md="24" :lg="12" class="colStyle">
        <Card class="public">
          <p slot="title">
            <span style="font-size:16px">待办事项</span>
          </p>
          <a href="/tool-admin1.5/#/notepad/todolist" slot="extra">
            查看更多
            <Icon type="md-arrow-dropright"></Icon>
          </a>
          <ol>
            <li v-for="item in todolistData" :key="item.id">
              <span>{{ item.date }}</span>
              <span>{{item.remarks}}</span>
            </li>
          </ol>
        </Card>
      </i-col>
      <i-col :xs="24" :md="24" :lg="12">
        <Card class="public">
          <p slot="title">
            <span style="font-size:16px">最近日记</span>
          </p>
          <a href="/tool-admin1.5/#/paper/luggage" slot="extra">
            查看更多
            <Icon type="md-arrow-dropright"></Icon>
          </a>
          <ol>
            <li v-for="item in luggageData" :key="item.id">
              <span>{{ item.date }}</span>
              <span>{{item.notepad}}</span>
            </li>
          </ol>
        </Card>
      </i-col>
    </Row>
    <Row>
      <i-col :xs="24" :md="24" :lg="12" class="colStyle">
        <Card class="public accounting">
          <p slot="title">
            <span style="font-size:16px">最近消费</span>
          </p>
          <a href="/tool-admin1.5/#/accounting/index" slot="extra">
            查看更多
            <Icon type="md-arrow-dropright"></Icon>
          </a>
          <ol>
            <li>
              <span>日期</span><span>名称</span><span>金额</span><span>备注</span>
            </li>
            <li v-for="item in accountingData" :key="item.id">
              <span>{{ item.date }}</span>
              <span>{{item.name}}</span>
              <span>{{ item.money }}</span>
              <span>{{item.remarks?item.remarks:"无"}}</span>
            </li>
          </ol>
        </Card>
      </i-col>
      <i-col :xs="24" :md="24" :lg="12">
        <Card class="public">
          <p slot="title">
            <span style="font-size:16px">最近日报</span>
          </p>
          <a href="/tool-admin1.5/#/paper/dailypaper" slot="extra">
            查看更多
            <Icon type="md-arrow-dropright"></Icon>
          </a>
          <ol>
            <li v-for="item in dailypaperData" :key="item.id">
              <span>{{ item.date }}</span>
              <span>{{item.content}}</span>
            </li>
          </ol>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { on, off } from "@/libs/tools";
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import { getHomeData } from "@/api/home";
export default {
  name: "home",
  components: {
    InforCard,
    CountTo
  },
  data() {
    return {
      dom: null,
      todolistData: [],
      accountingData: [],
      dailypaperData: [],
      luggageData: [],
      inforCardData: [
        {
          title: "待办事项",
          icon: "ios-list-box-outline",
          count: 0,
          color: "#ff9900"
        },
        {
          title: "随笔数量",
          icon: "ios-paper-outline",
          count: 0,
          color: "#2d8cf0"
        },
        { title: "累计消费", icon: "logo-usd", count: 0, color: "#19be6b" },

        {
          title: "累计收入",
          icon: "md-cart",
          count: 0,
          color: "#19be6b"
        }
      ],
      accountingData: []
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    //可以将数字转换成中文大写的表示，处理到万级别，例如 toChineseNum(12345)，返回 一万二千三百四十五。

    getData() {
      getHomeData({ size: this.$store.state.pageSize }).then(res => {
        if (res.data.code == 0) {
          //卡片数量
          this.todolistData = res.data.todolist_data;
          this.accountingData = res.data.accounting_data;
          this.luggageData = res.data.luggage_data;
          this.dailypaperData = res.data.dailypaper_data;
          this.inforCardData[0].count = parseInt(res.data.todolist_count);
          this.inforCardData[1].count = parseInt(res.data.luggage_count);
          this.inforCardData[2].count = res.data.money;
          this.inforCardData[3].count = res.data.income_money;
          const carData = this.accountingData.filter(item => {
            return item.money >= 100;
          });
          let carMoney = 0;
          for (let index = 0, len = carData.length; index < len; index++) {
            carMoney += parseFloat(carData[index].money);
          }
          
        } else if (res.data.code == 1010) {
          this.$Message.warning("您的登录状态已失效，请您重新登录.");
          this.$router.push("/login");
        } else {
          this.$Message.error("加载数据失败了，错误原因：" + res.data.msg);
        }
      });
    }
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    off(window, "resize", this.resize);
  }
};
</script>

<style lang="less" scope>
.count-style {
  font-size: 50px;
}
.ivu-card-body {
  padding: 10px 20px;
}
.public {
  font-size: 16px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
  ol {
    padding: 10px;
    li {
      margin-bottom: 0.6rem;
      font-size: 14px;
      display: flex;
      span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      :first-child {
        flex: 1;
        padding-right: 20px;
        text-align: left;
      }
      :last-child {
        flex: 3;
        text-align: left;
      }
    }
  }
}
.accounting {
  ol {
    li:first-child{
      font-weight: 700;
    }
    li {
      text-align: center;
      :first-child {
        text-align: center;
        flex: 2;
      }
      :nth-child(2) {
        text-align: center;
        flex: 3;
      }
      :nth-child(3) {
        text-align: center;
        flex: 3;
      }
      :last-child {
        text-align: center;
        flex: 4;
      }
    }
  }
}
</style>
